<template>
    <div style="width: 95%;margin: auto;">
        <!-- 
        :inline :把el-form-item 设置 行内元素
         -->
        <el-form :inline="true" :model="housePage" class="demo-form-inline">
            <el-form-item style="width: 180px;">
                <el-input v-model="housePage.area" placeholder="请输入面积" clearable />
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-input v-model="housePage.storey" placeholder="请输入楼层" clearable />
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-input v-model="housePage.buildingId" placeholder="请输入楼宇编号" clearable />
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-input v-model="housePage.remarks" placeholder="备注" clearable />
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-select v-model="housePage.status" placeholder="是否空余" clearable>
                    <el-option label="未入驻" value="0" />
                    <el-option label="已入驻" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item style="width: 100px;">
                <el-button type="primary" @click="findAll(1)" style="width: 100%;">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="width: 95%;margin: auto;">
        <el-button type="primary" :icon="Plus" @click="showDialog()"></el-button>
        <el-button type="primary" :icon="Delete" @click="batchedDeleteByIds()">批量删除</el-button>
    </div>
    <el-table :data="housePage.houses" style="width: 95%; margin: auto;" @selection-change="handleSelectionChange">
        <!-- 添加复选框选项 -->
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" prop="id" width="150px" fixed />
        <el-table-column label="楼层" prop="storey" width="150px" />
        <el-table-column label="房间号" prop="numbers" width="150px" />
        <el-table-column label="状态" prop="status" width="150px">
            <!-- 插槽 -->
            <template #default="scope">
                <el-tag v-if="scope.row.status == 0" type="primary">未入住</el-tag>
                <el-tag v-else type="danger">已入住</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="最近入驻" prop="intoDate" width="150px" />
        <el-table-column label="楼宇" prop="building" width="150px">
            <!-- 插槽 -->
            <template #default="scope">
                <el-tag type="primary">{{ scope.row.building.numbers }}{{ scope.row.building.units }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="备注" prop="remarks" width="150px" />
        <el-table-column label="房屋面积/m^2" prop="area" width="150px" />
        <el-table-column width="150px" fixed="right" label="操作">
            <template #default="scope">
                <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.row)" />
                <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <div style="width: 95%;margin: 10px auto;">
        <el-pagination background layout="prev, pager, next" v-model:page-size="housePage.pageSize"
            v-model:current-page="housePage.pageNum" :total="housePage.total" @current-change="findAll" />
    </div>


    <div>
        <!-- 新增房屋和修改对话框 -->
        <el-dialog v-model="dialog.visible" :title="dialog.title" width="25%" draggable>
            <!-- 新增用户表单 -->
            <el-form :inline="true" :model="dialog.house" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="dialog.house.storey" placeholder="请输入房间楼层" clearable
                        style="width: 200px;height: 35px;" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dialog.house.numbers" placeholder="请输入房间号" clearableID
                        style="width: 200px;height: 35px;" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dialog.house.buildingId" placeholder="请输入楼宇ID" clearable
                        style="width: 200px;height: 35px;" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dialog.house.area" placeholder="请输入房间面积" clearable
                        style="width: 200px;height: 35px;" />
                </el-form-item>
                <el-input v-model="dialog.house.remarks" :rows="2" type="textarea" placeholder="输入备注信息"
                    style="width: 340px;margin-top: 20px;" />
                <el-form-item style="margin-top: 20px;">
                    <el-button type="primary" @click="insertAndUpdateUser">{{ dialog.btnText }}</el-button>
                    <el-button type="primary" @click="clearFormData">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup>
//1.引入ref和reactive
import { ref, reactive, onMounted } from 'vue';
import request from '../utils/request';
import { Delete, Edit, House, Plus, Setting } from '@element-plus/icons-vue'

import { ElMessage } from 'element-plus'

//定义housePage
let housePage = reactive({
    pageNum: 0,
    pageSize: 5,
    total: 0,
    houses: []
})
//定义新增和修改房屋对话框属性
let dialog = reactive({
    visible: false,
    title: '',
    btnText: '',
    house: {
        storey: '',
        numbers: '',
        remarks: '',
        buildingId: '',
        area: ''
    }
})

//打开编辑房间按钮
const handleEdit =  (row) => {
    //显示表单信息
    dialog.house = row;
    //设置对话框标题
    dialog.title = "修改房屋信息";
    //设置确认按钮
    dialog.btnText = '确认修改';
    //显示对话框
    dialog.visible = true;
}
//打开新增房屋按钮
const showDialog =  () => {
    //显示表单信息
    dialog.house = '';
    //设置对话框标题
    dialog.title = "新增房屋信息";
    //设置确认按钮
    dialog.btnText = '确认新增';
    //显示对话框
    dialog.visible = true;
}
//查询所有house
const findAll = (index) => {
    housePage.pageNum = index;
    request.get('/house/findAll', { params: housePage }).then(res => {
        if (res.data.success) {
            housePage.houses = res.data.data.list;
            housePage.pageNum = res.data.data.pageNum;
            housePage.pageSize = res.data.data.pageSize;
            housePage.total = res.data.data.total;
        }
    })
}


//挂载前查询数据
onMounted(() => {
    findAll(1);
})
</script>